<template>
	<view style="width: 100%;" :class="{'active':multiple}">
		<u-checkbox-group :style="{left:'-'+labelWidth}" v-if="multiple" v-model="value"  @change="changeValue">
			<u-checkbox shape="circle"  :customStyle="{marginRight: '32rpx',marginBottom: '32rpx'}" v-for="(item, index) in radiolist" :key="index"
				:label="item[selectLabel]" :name="item[selectValue]">
			</u-checkbox>
		</u-checkbox-group>
		<u-radio-group v-else v-model="value" @change="changeValue">
			<u-radio :customStyle="{marginLeft: '16px'}"  v-for="(item, index) in radiolist"
				:key="index" :label="item[selectLabel]" :name="item[selectValue]">
			</u-radio>
		</u-radio-group>
	</view>
</template>

<script>
	export default {
		name: 'smma-select',
		props: {
			selectLabel: {
				type: String,
				default: 'text'
			},
			selectValue: {
				type: String,
				default: 'value'
			},
			option: {
				type: Array,
				default: () => []
			},
			dictCode: {
				type: String,
				default: ''
			},
			multiple: {
				type: Boolean,
				default: false,
			},
			url: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			labelWidth: {
			    type: [String, Number],
			    default: uni.$u.props.form.labelWidth
			},
		},
		data() {
			return {
				radiolist: [],
			}
		},
		async created() {

			if (this.option && this.option.length) {
				this.radiolist = this.option
			} else if (this.dictCode) {
				if (!uni.getStorageSync('sysAllDictItems')[this.dictCode]) {
					this.radiolist = uni.getStorageSync('sysAllDictItems')[this.dictCode];
				} else {
					let res = await this.$getRequest('/sys/dict/getDictItems/' + this.dictCode);
					this.radiolist = res.result || []
				}
			} else if (this.url) {
				let res = await this.$getRequest(this.url);
				this.radiolist = res.result.records ||res.result|| []
			} else {
				this.$util.msg('请设置数据来源')
			}
		},

		methods: {
			changeValue(e) {
				this.$emit("input", e)
			},

		}
	}
</script>

<style scoped lang="scss">
	.active {
		padding-bottom: 32rpx;
	}
	.u-radio-group--row {
		justify-content: flex-end;
	}
	.u-checkbox-group--row {
		flex-wrap: wrap;
		position: relative;
		top:64rpx;
	}
</style>